<script setup>

import {EditPen, House, Notebook, Setting, User, Van} from "@element-plus/icons-vue";
import router from "@/router";
</script>

<template>
  <div class="common-layout">
    <el-container style="height: 100vh">
      <el-aside width="200px" style="border-right: 1px solid #ccc">
        <div
            style="height: 55px;display: flex; justify-content: center; align-items: center;font-weight: bold; font-size: 24px">
          <el-icon style="margin-right: 3px"><Van /></el-icon>
          
        </div>
        <el-scrollbar class="menu" style="width: 100%; height: calc(100vh - 55px)">
          <el-menu
              default-active="0"
              class="el-menu-vertical-demo"
          >
            <el-menu-item index="0" @click="router.push('/index')">
              <template #title>
                <el-icon>
                  <House/>
                </el-icon>
                <span>首页</span>
              </template>
            </el-menu-item>

			<el-sub-menu index="10">
			  <template #title>
			    <el-icon>
			      <User/>
			    </el-icon>
			    <span>地区概况</span>
			  </template>
			  <el-menu-item index="10-1" @click="router.push('/NAX')">农安县</el-menu-item>
			</el-sub-menu>
			
			<el-sub-menu index="8">
			  <template #title>
			    <el-icon>
			      <User/>
			    </el-icon>
			    <span>高程DEM</span>
			  </template>
			  <el-menu-item index="8-1" @click="router.push('/DEM2010')">2010年DEM状况</el-menu-item>
			  <el-menu-item index="8-2" @click="router.push('/DEM2020')">2020年DEM状况</el-menu-item>
			</el-sub-menu>
			
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <User/>
                </el-icon>
                <span>有机质PH</span>
              </template>
              <el-menu-item index="1-1" @click="router.push('/PH2010')">2010年有机质情况</el-menu-item>
              <el-menu-item index="1-2" @click="router.push('/PH2020')">2020年有机质情况</el-menu-item>     
            </el-sub-menu>

            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <Notebook/>
                </el-icon>
                <span>有机质密度SOCD</span>
              </template>
              <el-menu-item index="2-1" @click="router.push('/SOCD2010')">2010年有机质密度</el-menu-item>
              <el-menu-item index="2-2" @click="router.push('/SOCD2020')">2020年有机质密度</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <EditPen/>
                </el-icon>
                <span>集中连片度CONTIG</span>
              </template>
              <el-menu-item index="3-1" @click="router.push('/CONTIG2010')">2010年集中连片度</el-menu-item>
              <el-menu-item index="3-2" @click="router.push('/CONTIG2020')">2020年集中连片度</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <setting/>
                </el-icon>
                <span>灌溉保障能力IGCI</span>
              </template>
              <el-menu-item index="4-1" @click="router.push('/IGCI2010')">2010年灌溉保障能力</el-menu-item>
              <el-menu-item index="4-2" @click="router.push('/IGCI2020')">2020年灌溉保障能力</el-menu-item>
            </el-sub-menu>           

            <el-sub-menu index="5">
              <template #title>
                <el-icon>
                  <setting/>
                </el-icon>
                <span>土壤质地</span>
              </template>
              <el-menu-item index="5-1" @click="router.push('/TRZD2010')">2010年土壤质地</el-menu-item>
              <el-menu-item index="5-2" @click="router.push('/TRZD2020')">2020年土壤质地</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="6">
              <template #title>
                <el-icon>
                  <User/>
                </el-icon>
                <span>高粮食生产力</span>
              </template>
              <el-menu-item index="6-1" @click="router.push('/GLS2010')">2010年高粮食生产力</el-menu-item>
              <el-menu-item index="6-2" @click="router.push('/GLS2020')">2020年高粮食生产力</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="7">
              <template #title>
                <el-icon>
                  <User/>
                </el-icon>
                <span>稳定粮食生产力</span>
              </template>
              <el-menu-item index="7-1" @click="router.push('/WDLS2010')">2010年稳定粮食生产力</el-menu-item>
              <el-menu-item index="7-2" @click="router.push('/WDLS2020')">2020年稳定粮食生产力</el-menu-item>
            </el-sub-menu>

            

            <!-- <el-sub-menu index="9">
              <template #title>
                <el-icon>
                  <User/>
                </el-icon>
                <span>饮食结构</span>
              </template>
              <el-menu-item index="9-1" @click="router.push('/CXRJSWXFL')">城乡人均食物消费量</el-menu-item>
              <el-menu-item index="9-2" @click="router.push('/CZDWXSWXFL')">城镇动物性食物消费量</el-menu-item>
              <el-menu-item index="9-3" @click="router.push('/CZDZWSWXFL')">城镇动植物食物消费量</el-menu-item>
              <el-menu-item index="9-4" @click="router.push('/CZZWXSWXFL')">城镇植物性食物消费量</el-menu-item>
              <el-menu-item index="9-5" @click="router.push('/NCDWXSWXFL')">农村动物性食物消费量</el-menu-item>
              <el-menu-item index="9-6" @click="router.push('/NCDZWSWXFL')">农村动植物食物消费量</el-menu-item>
              <el-menu-item index="9-7" @click="router.push('/NCZWXSWXFL')">农村植物性食物消费量</el-menu-item>
            </el-sub-menu> -->

            <!-- <el-sub-menu index="10">
              <template #title>
                <el-icon>
                  <User/>
                </el-icon>
                <span>地区概况</span>
              </template>
              <el-menu-item index="10-1" @click="router.push('/HNS')">农安县</el-menu-item>
            </el-sub-menu> -->
            
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-container>
        <el-header style="height: 55px; border-bottom: 1px solid #ccc;display:flex; justify-content: space-around; align-items: center;">
          <div style="width: 80%; text-align: left; height: 55px;display:inline-flex; justify-content: flex-start; align-items: center;font-weight: bold; font-size: 24px">典型黑土区耕地可持续性时空评估信息系统</div>
          <div style="width: 20%; text-align: right;">
            <el-dropdown>
              <el-avatar style="width: 35px; height: 35px; margin-top: 10px"
                         src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item @click="router.push('/')">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main style="background-color: rgba(246, 249, 248)">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.menu :deep(.el-menu) {
  border-right: 0;
}
</style>